<template>
  <el-dialog title="项目" v-model="localVisible" class="custom-dialog-width">
    <el-form :model="form" class="form-box">
      <el-row class="form-box-row">
        <!-- <el-form-item label="项目编号" required>
          <el-input v-model="form.proNum"></el-input>
        </el-form-item> -->
        <el-form-item label="项目名称" required>
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start" required>
          <el-date-picker v-model="form.start" placeholder="选择开始时间" type="datetime" format="YYYY/MM/DD hh:mm:ss"
            value-format="x" class="!w-1/1" />
        </el-form-item>
        <el-form-item label="结束时间" prop="end" required>
          <el-date-picker v-model="form.end" placeholder="选择结束时间" type="datetime" format="YYYY/MM/DD hh:mm:ss"
            value-format="x" class="!w-1/1" />
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, computed, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus';

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  initial: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'add'])

console.log(props, "props")

const localVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  }
})

const now = new Date();
const timestamp = now.getTime();

// 初始化 form 对象
const form = reactive({
  id: props.initial.id || '',
  name: props.initial.name || '',
  start: props.initial.start || timestamp,
  end: props.initial.end || ''
})

watch(
  () => props.initial,
  (newInitial) => {
    if (newInitial) {
      form.id = newInitial.id || '';
      form.name = newInitial.name || '';
      form.start = newInitial.start || timestamp;
      form.end = newInitial.end || '';
    }
  }
);

const cancel = () => {
  localVisible.value = false
}

const confirm = () => {
  if (!form.name) {
    return ElMessage.error("请选择项目名称");
  }
  if (!form.start) {
    return ElMessage.error("请选择开始时间");
  }
  if (!form.end) {
    return ElMessage.error("请选择结束时间");
  }

  emit('add', { ...form })
  localVisible.value = false
  resetForm();
}

const resetForm = () => {
  form.id = '';
  form.name = '';
  form.end = '';
};
</script>
<style lang="scss" scoped>
.form-box {

  &-row {
    display: flex;
    align-items: flex-end;
  }

  :deep(.el-form-item) {
    align-items: center;
    width: 100%;
  }

  :deep(.el-form-item__label) {
    min-width: 100px;
  }

  :deep(.el-form-item__content) {
    width: calc(100% - 100px);

    .el-date-editor {
      width: 100%;
    }
  }
}


</style>
